iT邦幫忙

2021 iThome 鐵人賽

DAY 14
0

接續前一天的單一功能原則,我們重構了 fetchUser 變成一個 customer hook , useFetchAPI,那我們現在來引入看看,也接著來重構剩下的部分。

  • fetchUser 取資料
  • updataUserData
  • updateUserError
  • popup 呈現
  • 資料呈現
// Profile.jsx
import {useEffect, useCallback ,useState} from 'react';
import useFetchAPI from './useFetchAPI';

const Profile = ()=>{
	const {data,error} = useFetchAPI('https:www.fakeapi.cpm/login');
	
	return (
			<div>
					{Object.keys(userData).length > 0 &&
					<>
						<div>Name:{userData.name}</div>
						<div>Name:{userData.email}</div>
						<div>Name:{userData.phone}</div>
					</>
					}
					{userError && <div>{userError}</div>}
       </div>)

}

export default Profile;

在我們引用完 useFetchAPI 後,我們可以發現,是不是 fetch api 的事情只要交給 useFetchAPI,另外 updataUserData 和 updateUserError 的管理因為封裝在 useFetchAPI 裡,所以這兩個部分也同時在 useFetchAPI 去維持他們的功能。所以 updataUserData 和 updateUserError 也重構完畢。

另外針對 popup 的部分,我們可以把它封裝成一個叫 PopUp component,這樣不論傳入任何資料都適用,並且可以控制他開關。

// Popup component

const Popup = (isOpen,message)=>{
	return isOpen? <div>{message}</div> :null;
}

export default Popup;
// Profile.jsx
import {useEffect, useCallback ,useState} from 'react';
import useFetchAPI from './useFetchAPI';
import Popup from './Popup';

const Profile = ()=>{
	const {data,error} = useFetchAPI('https:www.fakeapi.cpm/login');
	
	return (
			<div>
					{Object.keys(userData).length > 0 &&
					<>
						<div>Name:{userData.name}</div>
						<div>Name:{userData.email}</div>
						<div>Name:{userData.phone}</div>
					</>
					}
					<Popup isOpen={!!error} message={error} />
       </div>
	)

}

export default Profile;

另外資料的部分也可以直接用 useFetchAPI 得到的 data 來呈現。

// Profile.jsx
import {useEffect, useCallback ,useState} from 'react';
import useFetchAPI from './useFetchAPI';
import Popup from './Popup';

const Profile = ()=>{
	const {data,error} = useFetchAPI('https:www.fakeapi.cpm/login');
	
	return (
			<div>
					{Object.keys(data).length > 0 &&
					<>
						<div>Name:{userData.name}</div>
						<div>Name:{userData.email}</div>
						<div>Name:{userData.phone}</div>
					</>
					}
					<Popup isOpen={!!error} message={error} />
       </div>
	)

}

export default Profile;

這樣重構完事不是很簡潔,也很方便找錯誤。


上一篇
day13: 模組化好的寫法 -單一功能原則(1)
下一篇
day15: 模組化好的寫法 - 只公開必要的 Interface 和狀態管理
系列文
寫出好維護又簡潔的 react 程式碼 feat: Function Programming30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言